<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
		<title>省地图</title>
		<link rel="shortcut icon" href=./favicon.ico> <!--<link rel="stylesheet" type="text/css" href="css/hui.css" />-->
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<style type="text/css">
			.container {
				width: 100%;
				height: 100vh;
			}

			.chart {
				width: 100%;
				height: 100vh;
				background-image: url('./js/MapJs/images/beijingtupian.png');
				background-size: 100% 100%;
			}

			.backBtn {
				position: fixed;
				top: 30px;
				background-color: rgba(0, 194, 152, .6);
				border: 0;
				color: #fff;
				/*height: 27px;*/
				font-family: Microsoft Yahei;
				font-size: 16px;
				cursor: pointer;
				z-index: 9;
			}


			/*重置返回按钮样式*/
			#hui-back:before {
				font-size: 15px;

			}
		</style>
	</head>
	<body>

		<div class="container">
			<div class="backBtn" id="hui-back" style="width: 57px; height: 26px; line-height: 28px;">
				<i style="line-height: 24px; color: #fff;">返回</i>
			</div>
			<div id="mapChart" class="chart"></div>
		</div>


		<script type="text/javascript" src="js/func/hui.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/obj/my.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/MapJs/jq.js"></script>
		<script type="text/javascript" src="./js/MapJs/echarts.min.js"></script>
		<script type="text/javascript" src="./js/MapJs/china.js"></script>
		<script type="text/javascript" src="./js/MapJs/hunan.js"></script>
		<script type="text/javascript" src="./js/MapJs/shi.js"></script>
		<script type="text/javascript" src="./js/MapJs/china-main-city-map.js"></script>
		<script>
			var shiJson = baseData; // 匹配市名
			var baseColor = '#0fbcca'; //  有基地 背景颜色
			var baseColorData = []; //市区高亮数据
			var mapData = []; // 标注数据
			//  	{'latitude':28.3156680000, 'longitude':109.7382470000 , 'name':'1', 'value':32358260, 'color':'rgba(255,69,0, .5)'},//湘西

			var dataColumns = JSON.parse(localStorage.getItem("dataColumns"));
			
			 console.log(dataColumns);
			echarts.registerMap('hunan', hunanData);
			//回测ECharts 最好在JS头部开始初始化   否则会造成不必要的报错
			var chart = echarts.init(document.getElementById('mapChart')); //初始化ECharts


			//默认第一次调用基地数据请求 
			getColumns(dataColumns);

			//获取基地数据
			function getColumns(results) {
				/*
				 * 通过全国地图缓存获得数据  然后绘制ECharts地图
				 */
				$.each(results, function(i, value) {
					if (value.deeppath) {
						// console.log(value.lat + '------' + value.lng);
						mapData.push({
							'latitude': value.lat,
							'longitude': value.lng,
							'name': i,
							'value': 32358260,
							'color': 'rgba(255,69,0, .5)'
						})

						var DeepPath = value.deeppath.split('/')
						if (DeepPath[0] == '') {
							var cityName = shiJson[DeepPath[1]][DeepPath[2]];
							baseColorData.push({
								name: cityName,
								itemStyle: {
									areaColor: baseColor,
									color: baseColor
								}
							});
						} else {
							var cityName = shiJson[DeepPath[0]][DeepPath[1]];
							baseColorData.push({
								name: cityName,
								itemStyle: {
									areaColor: baseColor,
									color: baseColor
								}
							});
						}
					}
				})
				hunanMap();
			}




			function hunanMap() {
				chart.setOption({
					geo: {
						map: 'hunan',
						roam: true,
						zoom: 1.2,
						label: {
							normal: {
								show: true,
								color: '#fff'
							},
							emphasis: {
								textStyle: {
									color: '#fff'
								}
							}
						},
						regions: baseColorData,
						itemStyle: {
							normal: {
								borderColor: '#fff', //省市边框线颜色
								areaColor: '#1198b5', //省市背景颜色
							},
							emphasis: {
								areaColor: '#166296',
								borderWidth: 0
							}
						},
					},
					series: [{
						type: 'scatter',
						silent: true,
						coordinateSystem: 'geo',
						data: mapData.map(function(itemOpt) {
							return {
								name: itemOpt.name,
								value: [
									itemOpt.longitude,
									itemOpt.latitude,
									itemOpt.value
								],

								itemStyle: {
									normal: {
										color: itemOpt.color
									}
								}
							};
						})

					}]
				});
			}
			hunanMap();

			chart.on('click', function(param) {
				var flag = 0;
				$.each(baseColorData, function(i, value) {
					if (value.name == param.name) {
						flag = 1;
						hui.open("main_New.html?cityName=" + param.name, {}, true, {});
						//hui.open("main_New.html?cityName=" + param.name, {}, true, {});
						//hui.open("main_Accordion.html?cityName=" + param.name, {}, true, {});
						return false;
					}
				})
				if (flag == 0) {
					hui.upToast('当前选中市暂无基地！！');
				}
			})
		</script>
	</body>

</html>
